---
title: 函数与指令
description: Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。
---

import { TipGood, TipBad } from '@/components/Tip'

## @tailwind

<!-- Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS. -->
使用 `@tailwind` 指令向您的 CSS 添加 Tailwind 的 `base`, `components`, `utilities` 和 `screens` 样式。

```css
/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the responsive
 * variations of each utility.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind screens;
```

---

## @apply

<!-- Use `@apply` to inline any existing utility classes into your own custom CSS. -->
使用 `@apply` 将任何现存的功能类内联到您的自定义 CSS 中。

<!-- This is useful when you find a common utility pattern in your HTML that you'd like to extract to a new component. -->
当您在您的 HTML 里找到您想要提取到一个新组件的通用的功能模式时，这非常有用。

```css
.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}
```

<!-- Note that classes are applied based on their location in your original CSS, not based on the order you list them after the `@apply` directive. This is to ensure that the behavior you get when extracting a list of classes with `@apply` matches how those classes behave when listed directly in your HTML. -->
注意，类是根据其在原始 CSS 中的位置而不是根据在 `@apply` 指令之后列出它们的顺序来应用的。这是为了确保使用 `@apply` 提取类列表时得到的行为与直接在 HTML 中列出的类的行为相匹配。

```css
/* Input */
.btn {
  @apply py-2 p-4;
}

/* Output */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
```

<!-- If you want fine-grained control over the order in which classes are applied, use multiple `@apply` statements: -->
如果您要对功能类的应用顺序进行细粒度的控制，请使用多个 `@apply` 语句：

```css
/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}
```

<!-- You can also mix `@apply` declarations with normal CSS declarations: -->
您还可以将 `@apply` 声明与常规 CSS 声明混合使用：

```css
/* Input */
.btn {
  transform: translateY(-1px);
  @apply bg-black;
}

/* Output */
.btn {
  background-color: #000;
  transform: translateY(-1px);
}
```

<!-- Any rules inlined with `@apply` will have `!important` **removed** by default to avoid specificity issues: -->
默认情况下，任何使用 `@apply` 内联的规则中的 `!important` 将被删除，以避免出现特异性问题。

```css
/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}
```

<!-- If you'd like to `@apply` an existing class and make it `!important`, simply add `!important` to the end of the declaration: -->
如果您想使用  `@apply` 内联一个已经存在的类，并且为其设置 `!important`，只需要把 `!important` 添加到声明的结尾即可。

```css
/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}
```

<!-- Note that if you're using Sass/SCSS, you'll need to use Sass' interpolation feature to get this to work: -->
注意，如果您使用的是 Sass/SCSS，则您需要使用 Sass 的插值功能才能使其正常工作。

```css
.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}
```

---

## @layer

<!-- Use the `@layer` directive to tell Tailwind which "bucket" a set of custom styles belong to. Valid layers are a `base`, `components`, and `utilities`. -->
使用 `@layer` 指令告诉 Tailwind 一组自定义样式应该属于哪个 "bucket"。可用的层有 `base`, `components` 和 `utilities`。

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}
```

<!-- Tailwind will automatically move any CSS within a `@layer` directive to the same place as the corresponding `@tailwind` rule, so you don't have to worry as much about authoring your CSS in a specific order to avoid specificity issues. -->
Tailwind会自动将 `@layer` 指令中的所有 CSS 移至与相应 `@tailwind` 规则相同的位置，因此您不必担心以特定顺序编写 CSS 来避免特定性问题。

<!-- Wrapping any custom CSS in a `@layer` directive also tells Tailwind to consider those styles for purging when purging that layer. Read our [documentation on optimizing for production](/docs/optimizing-for-production) for more details. -->
在 `@layer` 指令中包装的任何自定义 CSS 也会告诉 Tailwind 在清除该层时考虑那些样式。阅读 [关于生产优化的文档](/docs/optimizing-for-production) 来了解更多详情。

---


## @variants

<!-- You can generate `responsive`, `hover`, `focus`, `active`, and other [variants](/docs/hover-focus-and-other-states) of your own utilities by wrapping their definitions in the `@variants` directive. -->
您可以通过在 `@variants` 指令中声明自己的功能类来生成他们的 `responsive`, `hover`, `focus`, `active` 及其它 [变体](/docs/hover-focus-and-other-states)。

```css
@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}
```

<!-- This will generate the following CSS: -->
这将生成以下 CSS：

```css
.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}
```

<!-- It's important to note that **variants are generated in the order you specify them**. -->
请务必注意，变体是按照您指定的顺序生成的。

<!-- So if you want focus utilities to take priority over hover utilities for example, make sure focus comes *after* hover in the list: -->
例如，如果您希望 focus 功能类优先于 hover 功能类，请确保列表中的 focus 应该在 hover 之后：

```css
/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}
```

<!-- The `@variants` at-rule supports all of the values that are supported in the `variants` section of your config file, as well as any [custom variants](/docs/plugins#adding-variants) added through plugins. -->
该 `@variants` 规则支持您配置文件中 `variants` 部分支持的所有值，以及通过插件添加的 [自定义变体](/docs/plugins#adding-variants)。

---

## @responsive

<!-- You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive: -->
您可以通过在 `@responsive` 指令中声明他们的定义来生成您自己的类的响应式变体。

```css
@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}
```

<!-- This is a shortcut for writing out `@variants responsive { ... }` which works as well. -->
这是 `@variants responsive { ... }` 的简写方式，同样起作用。

<!-- Using the default breakpoints, this would generate these classes: -->
使用默认断点，这将生成以下类：

```css
.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}
```

<!-- The responsive variants will be added to Tailwind's existing media queries at the end of your stylesheet. This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property. -->
响应式变体将在您的样式表的结尾被添加到 Tailwind 的已经存在的媒体查询中。这将确保那些带有响应式前缀的类优先级会高于同样 CSS 属性的非响应式的类。

---

## @screen

<!-- The `@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS. -->
`@screen` 指令允许您创建通过名称引用断点的媒体查询，而不是在您的 CSS 中复制他们的值。

<!-- For example, say you have a `sm` breakpoint at `640px` and you need to write some custom CSS that references this breakpoint. -->
例如，假设有一个名为 `sm` 的 `640px` 的断点，您只需要写一些自定义的指向这个断点的 CSS。

<!-- Instead of writing a raw media query that duplicates that value like this: -->
而不是编写一个复制那些值的原始的媒体查询，如下所示：

```css
@media (min-width: 640px) {
  /* ... */
}
```

<!-- ...you can use the `@screen` directive and reference the breakpoint by name: -->
...您可以使用 `@screen` 指令，然后根据名称引用这个断点：

```css
@screen sm {
  /* ... */
}
```

---

## theme()

<!-- Use the `theme()` function to access your Tailwind config values using dot notation. -->
使用  `theme()` 函数可以通过点符号来获取 Tailwind 配置的值。

<!-- This can be a useful alternative to `@apply` when you want to reference a value from your theme configuration for only part of a declaration: -->
当您想要引用一个您主题配置中的一部分声明的值时，这是一个 `@apply` 的有用的替代方式。

```css
.content-area {
  height: calc(100vh - theme('spacing.12'));
}
```

<!-- If you need to access a value that contains a dot (like the `2.5` value in the spacing scale), you can use square bracket notation: -->
如果您想获取一个含有点的值（像间距比例中的 `2.5`），则可以使用方括号。

```css
.content-area {
  height: calc(100vh - theme('spacing[2.5]'));
}
```

<!-- Since Tailwind uses a [nested object syntax](/docs/colors#nested-object-syntax) to define its default color palette, make sure to use dot notation to access the nested colors. -->
因为 Tailwind 使用 [嵌套对象语法](/docs/customizing-colors#nested-object-syntax) 来定义其默认调色板，因此请确保使用点符号来访问嵌套的颜色。

<!-- <TipBad>Don't use the dash syntax when accessing nested color values</TipBad> -->
<TipBad>获取嵌套的颜色值时不要使用破折号语法</TipBad>

```css
.btn-blue {
  background-color: theme('colors.blue-500');
}
```

<!-- <TipGood>Use dot notation to access nested color values</TipGood> -->
<TipGood>使用点符号获取嵌套的颜色值</TipGood>

```css
.btn-blue {
  background-color: theme('colors.blue.500');
}
```
